<template>
  <div>
    <el-row>
      <el-col :span="3">
        <left-nav-menu :length="8" @select="leftMenuSelect">
          <span slot="0"><i class="icon-blocks" />管理依据</span>
          <span slot="1">
            <i
              class="el-icon-document"
              style="font-size: 1.6em; margin-right: 16px; margin-left: -5px"
            />
            操作规程
          </span>
          <span slot="2"
            ><i
              class="icon-note"
              style="font-size: 1.4em; margin-left: -2px"
            />安全教育</span
          >
          <span slot="3"
            ><i
              class="icon-node-book"
              style="font-size: 1.5em; margin-left: -3px"
            />安全巡查</span
          >
          <span slot="4"><i
              class="icon-error"
              style="margin-right: 12px; font-size: 1.5em; margin-left: -3px"
            />双重预防体系</span>
          
          <span slot="5"
            ><i
              class="el-icon-upload2"
              style="margin-right: 16px; font-size: 1.5em; margin-left: -3px"
            />事故上报</span
          >
          <span slot="6"
            ><i
              class="el-icon-warning-outline"
              style="margin-right: 16px; font-size: 1.5em; margin-left: -3px"
            />应急管理</span
          >
          <span slot="7"
            ><i
              class="el-icon-s-operation"
              style="margin-right: 16px; font-size: 1.5em; margin-left: -3px"
            ></i
            >备品备件管理</span
          >
        </left-nav-menu>
      </el-col>
      <el-col :span="21">
        <keep-alive>
          <management-basis v-if="leftNavMenuIndex === '0'"></management-basis>
          <operating-procedures
            v-if="leftNavMenuIndex === '1'"
          ></operating-procedures>
          <online-education v-if="leftNavMenuIndex === '2'"></online-education>
          <safety-inspector v-if="leftNavMenuIndex === '3'"></safety-inspector>
           <hidden-danger-investigation
          v-if="leftNavMenuIndex === '4'"
        ></hidden-danger-investigation>
          <accident-report v-if="leftNavMenuIndex === '5'"></accident-report>
          <emergency-management
            v-if="leftNavMenuIndex === '6'"
          ></emergency-management>
          <spare-parts-management
            v-if="leftNavMenuIndex === '7'"
          ></spare-parts-management>
        </keep-alive>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopNavMenu from "~/components/TopNavMenu";
import LeftNavMenu from "~/components/LeftNavMenu";
import ManagementBasis from "~/views/safety-management/ManagementBasis";
import ClosedReminder from "~/views/safety-management/ClosedReminder";
import OnlineEducation from "~/views/safety-management/OnlineEducation";
import SafetyInspector from "~/views/safety-management/SafetyInspector";
import OperatingProcedures from "~/views/safety-management/OperatingProcedures";
import EmergencyManagement from "~/views/safety-management/EmergencyManagement";
import SparePartsManagement from "~/views/safety-management/SparePartsManagement";
import AccidentReport from "~/views/safety-management/AccidentReport";
import HiddenDangerInvestigation from "~/views/safety-management/HiddenDangerInvestigation";


export default {
  name: "BasicInformation",
  data() {
    return {
      leftNavMenuIndex: "0",
    };
  },
  components: {
    SparePartsManagement,
    OnlineEducation,
    ClosedReminder,
    TopNavMenu,
    LeftNavMenu,
    ManagementBasis,
    SafetyInspector,
    EmergencyManagement,
    OperatingProcedures,
    AccidentReport,
    HiddenDangerInvestigation
  },
  methods: {
    leftMenuSelect(index) {
      this.leftNavMenuIndex = index;
    },
  },
};
</script>

<style scoped>
span {
  font-size: 1.4em;
}
i {
  margin-right: 12px;
  font-size: 1.2em;
  color: black;
}
</style>
